<template>
  <v-layout type="console">
    <!-- <el-radio-group v-model="showThisActive" size="medium" @change="checkActicve(showThisActive)" class="nav-alike">
      <el-radio-button :label="0">
        <span class="nav-alike-item">模型开发</span>
      </el-radio-button>
      <el-radio-button :label="1">
        <span class="nav-alike-item">模型训练</span>
      </el-radio-button>

      <el-radio-button :label="2" v-if="$isReinforce">
        <span class="nav-alike-item">模型测试</span>
      </el-radio-button>
      <el-radio-button :label="2" v-if="!$isReinforce">
        <span class="nav-alike-item">模型部署</span>
      </el-radio-button>

    </el-radio-group> -->

    <el-tabs v-model="showThisActive" @tab-click="checkActicve(showThisActive)">
      <el-tab-pane label="模型开发" name="0" />
      <el-tab-pane label="模型训练" name="1" />
      <el-tab-pane label="模型测试" name="2" v-if="$isReinforce" />
      <el-tab-pane label="模型部署" name="3" v-if="!$isReinforce" />
    </el-tabs>

    <div class="table-data">
      <el-table :data="tableData">
        <el-table-column prop="name" label="名称">
          <template slot-scope="{ row }">
            <el-popover placement="right-start" width="320" trigger="hover">
              <row-data :row="row" />
              <span slot="reference">{{ row.name }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="resource.start_time" label="启动时间" />
        <!-- <el-table-column prop="update_time" label="资源组" /> -->
        <el-table-column prop="update_time" label="运行时长">
          <template slot-scope="{ row }">
            {{ countRanTime(row.resource.start_time) }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="update_time" label="环境" /> -->
        <el-table-column prop="status" label="状态">
          <template slot-scope="{ row }">
            <span :class="['alick-list-status', row.status]">●{{ statusMap[row.status] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="update_time" label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" @click="monitoring(row)" :disabled="row.status != 'running'">监控</el-button>
            <el-button type="text" @click="stop(row)">停止</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-box" v-if="Pagedata.total > Pagedata.size">
      <el-pagination background class="pagination" layout="total, prev, pager, next, jumper" :page-size="Pagedata.size"
        :current-page.sync="Pagedata.current" @current-change="handleCurrentChange" :total="Pagedata.total">
      </el-pagination>
    </div>
    <!-- <drawer-log ref="drawerLog" :row="rowData" /> -->
  </v-layout>
</template>

<script>
import { getGameExperimentMonitor, stopGameExperiment } from '@/api/gameExperiment'
import { getGameTaskVersionsMonitor, stopGameTaskVersion } from '@/api/gameTask'
import { getGameSimulationMonitor, stopGameSimulation } from '@/api/gameSimulation'
import { getExperimentMonitor, stopExperiment } from '@/api/notebook'
import { getTaskVersionsMonitor, stopTaskVersion } from '@/api/task'
import { getDeploysMonitor, stopServing } from '@/api/deploy'
import { getAllResource } from '@/api/dashboard'
// import { getAllResource, networkUsageCurrent } from '@/api/dashboard'

export default {
  name: "index",
  data() {
    return {
      showThisActive: "0",
      tableData: [],
      rowData: [],
      cpuRes: {},
      memRes: {},
      gpuRes: {},
      Pagedata: {
        current: 1,
        size: 10,
        total: 0,
      },
    };
  },
  components: {

  },
  methods: {
    async getExperiment() {
      let res = null
      let myInfo = await this.$myInfo(this)
      if (this.$isReinforce) {
        res = await getGameExperimentMonitor({ 'organization_id': myInfo.organization_id, ...this.Pagedata })
      } else {
        res = await getExperimentMonitor({ 'organization_id': myInfo.organization_id, ...this.Pagedata })
      }
      this.tableData = res.data.list
      this.Pagedata.total = res.data.total
    },
    async getTaskVersions() {
      let myInfo = await this.$myInfo(this)
      let res = null
      if (this.$isReinforce) {
        res = await getGameTaskVersionsMonitor({ 'organization_id': myInfo.organization_id, type: 1, ...this.Pagedata })
      } else {
        res = await getTaskVersionsMonitor({ 'organization_id': myInfo.organization_id, type: 1, ...this.Pagedata })
      }
      this.tableData = res.data.list
      this.Pagedata.total = res.data.total
    },
    async getDeploys() {
      let myInfo = await this.$myInfo(this)
      let res = null;
      if (this.$isReinforce) {
        res = await getGameTaskVersionsMonitor({ 'organization_id': myInfo.organization_id, type: 2, ...this.Pagedata })
      } else {
        res = await getDeploysMonitor({ 'organization_id': myInfo.organization_id, type: 2, ...this.Pagedata })
      }
      this.tableData = res.data.list
      this.Pagedata.total = res.data.total
    },
    async getSimulationTask() {
      let res = await getGameSimulationMonitor({ type: 1, ...this.Pagedata })
      this.tableData = res.data.list
      for (let i = 0; i < this.tableData.length; i++) {
        this.tableData[i].name = this.tableData[i].deploy_name
      }
      this.Pagedata.total = res.data.total
    },
    getData() {
      // this.Pagedata.current = 1
      if (this.showThisActive == 0) {
        this.getExperiment()
      }
      if (this.showThisActive == 1) {
        this.getTaskVersions()
      }
      if (this.showThisActive == 2) {
        this.getDeploys()
      }
      if (this.showThisActive == 3) {
        this.getSimulationTask()
      }
      this.getCakeData()
    },
    monitoringOver(type) {
      let thisType = { ...this[type] }
      thisType.tempColor = thisType.color
      thisType.tempUnderpainting = thisType.underpainting
      thisType.color = '#FFF'
      thisType.underpainting = 'rgba(255, 255, 255, .2)'
      this[type] = {}
      setTimeout(() => {
        this[type] = thisType
      })
    },
    monitoringOut(type) {
      let thisType = { ...this[type] }
      thisType.color = thisType.tempColor
      thisType.underpainting = thisType.tempUnderpainting
      this[type] = {}
      setTimeout(() => {
        this[type] = thisType
      })
    },
    monitoring(row) {
      this.rowData = row
      this.rowData.active = this.showThisActive
      this.$refs.drawerLog.shwoDrawer = true
    },
    async stop({ id }) {
      console.log(id)
      if (this.showThisActive == 0) {
        if (this.$isReinforce) {
          await stopGameExperiment({ id })
        } else {
          await stopExperiment({ id })
        }
      }
      if (this.showThisActive == 1) {
        if (this.$isReinforce) {
          await stopGameTaskVersion({ id })
        } else {
          await stopTaskVersion({ id })
        }
      }
      if (this.showThisActive == 2) {
        if (this.$isReinforce) {
          await stopGameTaskVersion({ id })
        } else {
          await stopServing(id)
        }
      }
      if (this.showThisActive == 3) {
        await stopGameSimulation(id)
      }
      this.getData()
    },
    checkActicve(i) {
      this.showThisActive = i
      this.Pagedata.current = 1
      this.getData()
    },
    handleCurrentChange(val) {
      this.Pagedata.current = val
      this.getData()
    },
    async getCakeData() {
      let resCpu = await getAllResource({ resourceType: "cpu" });
      let resMem = await getAllResource({ resourceType: "mem" });
      let resGpu = await getAllResource({ resourceType: "gpu" });
      this.cpuRes = resCpu.data
      resCpu.data.color = "#7872F6"
      resCpu.data.underpainting = "rgba(120, 114, 246, .2)"
      this.memRes = resMem.data
      resMem.data.color = "#4BACE4"
      resMem.data.underpainting = "rgba(75, 172, 228, .2)"
      this.gpuRes = resGpu.data
      resGpu.data.color = "#2E79F6"
      resGpu.data.underpainting = "rgba(46, 121, 246, .2)"
    },
  },
  created() {

  },
  watch: {},
  mounted() {
    this.getData()
    this.$EventBus.$on('experiment', () => {
      if (this.showThisActive == 0) this.getData()
    })
    this.$EventBus.$on('train', () => {
      if (this.showThisActive == 1 || this.showThisActive == 2) this.getData()
    })
    this.$EventBus.$on('serving', () => {
      if (this.showThisActive == 2) this.getData()
    })
  },
  destroyed() {
    this.$EventBus.$off('experiment')
    this.$EventBus.$off('train')
    this.$EventBus.$off('serving')
  },
};
</script>
<style lang="less" scoped>
.table-data {
  padding: 0 16px 16px;
  background: #FFF;
  border-radius: 0 10px 10px 10px;
}

.home-monitoring {
  display: flex;
  width: 100%;

  li {
    flex: 1;
    margin: 0 8px;
    height: 266px;
    background: #FFF;
    border-radius: 10px;
    cursor: pointer;
    transition: all .3s;
    position: relative;

    .monitoring-layer {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
    }

    .name {
      margin-top: 22px;
      text-align: center;
      padding-top: 48px;
      line-height: 32px;
      position: relative;

      &::before {
        display: block;
        width: 38px;
        height: 38px;
        content: ' ';
        position: absolute;
        left: 50%;
        top: 0%;
        margin: 0 0 0 -19px;
        mask-size: 38px 38px;
      }
    }

    &:hover {
      .name {
        color: #FFF;

        &::before {
          background: #FFF;
        }
      }
    }
  }

  .cpu {
    .name::before {
      mask-image: url(~@/assets/img/icon-home-gpu.svg);
      background: #7872F6;
    }

    &:hover {
      background: #7872F6;
    }
  }

  .vgpu {
    .name::before {
      mask-image: url(~@/assets/img/icon-home-gpu.svg);
      background: #F6CC0D;
    }

    &:hover {
      background: #F6CC0D;
    }
  }

  .ram {
    .name::before {
      mask-image: url(~@/assets/img/icon-home-ram.svg);
      background: #4BACE4;
    }

    &:hover {
      background: #4BACE4;
    }
  }

  .gpu {
    .name::before {
      mask-image: url(~@/assets/img/icon-home-gpu.svg);
      background: #2E79F6;
    }

    &:hover {
      background: #2E79F6;
    }
  }
}
</style>
